<template>
  <div class="profile">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>介绍</span>
              </div>
            </template>
            <panthumb :image="$store.getters.user.avatar">
              <div>HELLO</div>
              超级管理员
            </panthumb>
          </el-card>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple">
            <el-card class="box-card">
              <el-tabs v-model="activeName">
                <el-tab-pane label="功能" name="first">User</el-tab-pane>
                <el-tab-pane label="章节" name="second">Config</el-tab-pane>
                <el-tab-pane label="作者" name="third">Role</el-tab-pane>
              </el-tabs>
            </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Panthumb from '@/components/panthumb'
const activeName = ref('first')
</script>

<style lang="scss" scoped>
.profile {
  .panthumb {
    margin: 0 auto;
  }
}
</style>
